<template>
  <div>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>票价管理</el-breadcrumb-item>
      <el-breadcrumb-item>票价类型</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 票价添加 -->
    <el-button class="btn" type="primary" @click="dialogFormVisible = true">添加管理<i class="el-icon-upload el-icon--right"></i></el-button>
    <!-- 票价修改 -->
    <el-button class="btn" type="success" @click="updateVisible = true">修改管理<i class="el-icon-upload el-icon--right"></i></el-button>
    <!-- 添加弹出层 -->
    <el-dialog title="添加管理" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="地区" :label-width="formLabelWidth">
          <el-input v-model="form.area" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="城市" :label-width="formLabelWidth">
          <el-input v-model="form.city" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="景区" :label-width="formLabelWidth">
          <el-input v-model="form.sale_view" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="票价类型" :label-width="formLabelWidth">
          <el-input v-model="form.types" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="折扣" :label-width="formLabelWidth">
          <el-input v-model="form.discount" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="价格" :label-width="formLabelWidth">
          <el-input v-model="form.price" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="editOrderUserInfo">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 表格区域 -->
    <el-table :data="tableData" border style="width: 100%" class="tab">
      <el-table-column prop="id" label="序号"> </el-table-column>
      <el-table-column prop="area" label="地区"> </el-table-column>
      <el-table-column prop="city" label="城市"> </el-table-column>
      <el-table-column prop="sale_view" label="景区"> </el-table-column>
      <el-table-column prop="types" label="票价类型"> </el-table-column>
      <el-table-column prop="discount" label="折扣"> </el-table-column>
      <el-table-column prop="price" label="价格"> </el-table-column>
      <el-table-column prop="operation" label="操作">
        <template slot-scope="scope">
          <!-- 删除按钮 -->
          <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeUserById(scope.row.id)"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页区域 -->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.pagenum" :page-sizes="[5]" :page-size="queryInfo.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>

    <!-- 修改对话框 -->
    <el-dialog title="信息更改" :visible.sync="updateVisible">
      <el-form :model="editForm">
        <el-form-item label="序号" :label-width="formLabelWidth">
          <el-input v-model="editForm.id" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="地区" :label-width="formLabelWidth">
          <el-input v-model="editForm.area" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="城市" :label-width="formLabelWidth">
          <el-input v-model="editForm.city" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="景区" :label-width="formLabelWidth">
          <el-input v-model="editForm.sale_view" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="票价类型" :label-width="formLabelWidth">
          <el-input v-model="editForm.types" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="折扣" :label-width="formLabelWidth">
          <el-input v-model="editForm.discount" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="价格" :label-width="formLabelWidth">
          <el-input v-model="editForm.price" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updateVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateOrderUserinfo">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Order',
  data() {
    return {
      // 获取票价信息
      tableData: [],
      // 修改的用户信息
      editForm: {
        id: '',
        area: '',
        city: '',
        sale_view: '',
        types: '',
        discount: '',
        price: '',
      },
      form: {
        id: '',
        area: '',
        city: '',
        sale_view: '',
        types: '',
        discount: '',
        price: '',
      },
      dialogFormVisible: false,
      updateVisible: false,
      formLabelWidth: '120px',
      queryInfo: {
        pagenum: 1,
        pagesize: 5,
      },
      total: 0,
    }
  },
  created() {
    this.getOrderList()
  },
  methods: {
    async getOrderList() {
      const { data: res } = await this.$http.get(`my/order?pagenum=${this.queryInfo.pagenum}`)
      if (res.status !== 0) return this.$message.error(res.message)
      // this.$message.success(res.message)
      this.tableData = res.data
      this.total = res.total
    },
    async updateOrderUserinfo() {
      let params = new URLSearchParams()
      params.append('id', this.editForm.id)
      params.append('area', this.editForm.area)
      params.append('city', this.editForm.city)
      params.append('sale_view', this.editForm.sale_view)
      params.append('types', this.editForm.types)
      params.append('discount', this.editForm.discount)
      params.append('price', this.editForm.price)
      const { data: res } = await this.$http.post('my/updateOrder', params)
      if (res.status !== 0) return this.$message.error(res.message)
      this.$message.success(res.message)
      this.updateVisible = false
      this.getOrderList()
    },
    async editOrderUserInfo() {
      let params = new URLSearchParams()
      params.append('area', this.form.area)
      params.append('city', this.form.city)
      params.append('sale_view', this.form.sale_view)
      params.append('types', this.form.types)
      params.append('discount', this.form.discount)
      params.append('price', this.form.price)
      const { data: res } = await this.$http.post('my/addOrder', params)
      if (res.status !== 0) return this.$message.error(res.message)
      this.$message.success(res.message)
      this.dialogFormVisible = false
      this.getOrderList()
    },
    async removeUserById(id) {
      const confirmResult = await this.$confirm('此操作将永久删除该权限, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).catch((err) => err)

      if (confirmResult !== 'confirm') return

      const { data: res } = await this.$http.delete(`my/deleteOrder/${id}`)
      if (res.status !== 0) return this.$message.error(res.message)
      this.$message.success(res.message)
      this.getOrderList()
    },
    // 分页区的当前页数据显示的条数
    handleSizeChange(newSize) {
      this.queryInfo.pagesize = newSize
      this.getOrderList()
    },
    // 当前页面值
    handleCurrentChange(newPage) {
      this.queryInfo.pagenum = newPage
      this.getOrderList()
    },
  },
}
</script>

<style>
.btn,
.tab {
  margin-top: 20px;
}
</style>
